<template>
  <div class="Hot-search">
      <h6>热门搜索</h6>
      <ul>
         <li v-for="item in HotSearchList" :key="item.score" @click="$emit('chan-component',{com:'SearchResult',text:item.searchWord})">{{item.searchWord}}</li>
      </ul>
    <searc-history></searc-history>
  </div>
</template>

<script>
import SearcHistory from "./SearcHistory";

export default {
    components:{
        SearcHistory
    },
    data(){
        return {
            HotSearchList:[],
        }
    },
    beforeCreate(){
        this.axios.get('/search/hot/detail').then((result)=>{
            // console.log(result.data.data);
            this.HotSearchList = result.data.data.slice(0,10);
        })
    }
}
</script>

<style lang="less" scoped>
.Hot-search{
    h6{
        color: #666;
        font-size: 12px;
        margin: 15px 0 10px 0;
        padding: 0 15px;
    }
    ul{
        padding: 0 15px;
        display: flex;
        flex-wrap: wrap;
        li{
            padding: 5px 10px;
            border: 1px rgb(224, 224, 224) solid;
            border-radius: 20px;
            font-size: 14px;
            margin:5px 5px;
        }
    }
}
</style>